<!-- 确认订单 -->
<template>
	<view class="order-wrap">
		<view class="u-flex u-flex-col u-col-center order-card">
			<!-- 确认订单商品卡片 -->
			<view class="u-flex u-row-between u-col-center" style="width: 100%;">
				<view class="shop-name">缴费城市代理</view>
				<view class="shop-value">¥1234.00</view>
			</view>
			<view class="u-flex u-row-right u-col-center u-m-t-60" style="width: 100%;">
				<view class="heji">合计:</view>
				<view class="money-all">¥1234.00</view>
			</view>
		</view>
		<view class="pay-way u-flex u-row-between u-col-center">
			<view class="pay-name">支付方式</view>
			<view class="radio-all u-flex u-row-right u-col-center">
				<view class="radio-group u-flex u-row-right u-col-center" @click="changePay(1)">
					<image class="radio" :src="payway=='1'?'/static/images/user/group/xuanzhong.png':'/static/images/user/group/quan.png'"></image>
					<view class="radio-content u-flex u-row-left u-col-center">
						<view class="radio-title">微信</view>
						<image class="radio-image" src="/static/images/user/group/weixin.png"></image>
					</view>
				</view>
				<view class="radio-group u-flex u-row-right u-col-center" @click="changePay(2)">
					<image class="radio" :src="payway=='2'?'/static/images/user/group/xuanzhong.png':'/static/images/user/group/quan.png'"></image>
					<view class="radio-content u-flex u-row-left u-col-center">
						<view class="radio-title">积分</view>
						<image class="radio-image" src="/static/images/user/group/jifen.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="order-content">
			<view class="pay-name">信息填写</view>
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<view class="address-box">
					<!-- 地址表单 -->
					<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="身份:" prop="consignee">
						<view class="radio-all u-flex u-row-right u-col-center">
							<view class="radio-group u-flex u-row-right u-col-center" @click="changeInfo(1)">
								<image class="radio" :src="infoData=='1'?'/static/images/user/group/xuanzhong.png':'/static/images/user/group/quan.png'"></image>
								<view class="radio-content">
									<view class="radio-title">个人</view>
								</view>
							</view>
							<view class="radio-group u-flex u-row-right u-col-center" @click="changeInfo(2)">
								<image class="radio" :src="infoData=='2'?'/static/images/user/group/xuanzhong.png':'/static/images/user/group/quan.png'"></image>
								<view class="radio-content">
									<view class="radio-title">公司</view>
								</view>
							</view>
						</view>
					</u-form-item>
					<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="姓名:" prop="consignee">
						<u-input placeholder="请填写" v-model="model.consignee" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="手机号:" prop="phone">
						<u-input placeholder="请填写" v-model="model.phone" type="number" input-align="right"></u-input>
					</u-form-item>
					<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="城市:" prop="area_text">
						<u-input type="select" v-model="model.area_text" :select-open="showSelect" placeholder="请选择城市" @click="showSelect = true" input-align="right"></u-input>
					</u-form-item>
					<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="邮箱:" prop="phone">
						<u-input placeholder="请填写" v-model="model.phone" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="微信号:" prop="phone">
						<u-input placeholder="请填写" v-model="model.phone" type="text" input-align="right"></u-input>
					</u-form-item>
					<!-- 设置默认 -->
					<view class="default-box u-flex u-row-left u-flex-col">
						<text class="title u-p-t-30 u-p-b-20">上传简历:</text>
						<view class="upload">
							<u-upload
								:fileList="fileList"
								@afterRead="afterRead"
								@delete="deletePic"
								name="6"
								multiple
								:maxCount="1"
								width="250"
								height="250"
							>
								<image src="/static/images/user/group/adduplod.png"
								       mode="widthFix" style="width: 250px;height: 250px;"></image>
							</u-upload>
						</view>
					</view>
				</view>
			</u-form>
		</view>
		<!-- 省市区选择器 -->
		<u-select mode="mutil-column-auto" safe-area-inset-bottom :list="addressAreaList" v-model="showSelect" @confirm="regionConfirm"></u-select>
		
		<!-- 底部 -->
		<view class="foot-box-wrap">
			<view class="foot-box u-flex u-row-between safe-area-inset-bottom">
				<view class="u-flex">
					<view class="all-money">
						<text>合计：</text>
						<text class="price">￥{{ orderPre.total_fee || "0.00" }}</text>
					</view>
				</view>
				<button
					class="cu-btn sub-btn"
					@tap="subOrder"
					:disabled="isDisabled"
					hover-class="btn-hover"
				>
					去付款
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
import Auth from "@/shopro/permission/index.js";
export default {
	data() {
		return {
			isDisabled:false,
			platform: this.$platform.get(),
			totalNum: 0,
			customStyle: {
				//自定义按钮样式
				width: "210rpx",
				lineHeight: "70rpx",
				background:
					"linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1))",
				boxShadow: " 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22)",
				borderRadius: "100rpx",
				fontSize: "28rpx",
				border: "none",
				color: "#fff",
				margin: "0",
			},
			goodsList: [], //传递过来的参数
			perGoodsList: {}, //确认单订单商品
			currentGoodsId: 0, //当前商品id.
			currentSkuId: 0, //商品的规格ID
			orderPre: {
				total_fee:1000
			},
			
			showSelect: false, //省市区
			addressAreaList: [],
			addressId: 0, //收货地址ID
			labelStyle: {
				'font-size': '28rpx',
				color: '#595959'
			},
			model: {
				id: 0,
				consignee: '',
				phone: '',
				area_text: '',
				address: '',
				
				
			},
			payway: 1,
			infoData:1,
			rules: {
				phone: [
					{
						required: true,
						message: '请输入收货人手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				],
				consignee: [
					{
						required: true,
						message: '请填写收货人姓名',
						trigger: ['change', 'blur']
					}
				],
				area_text: [
					{
						required: true,
						message: '请选择地区',
						trigger: ['change', 'blur']
					}
				],
				address: [
					{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}
				]
			},
			errorType: ['message'],
			chooseAddress: '点击选择地理位置', //定位地址
			fileList:[]
		};
	},
	computed: {
	
	
	},
	onShow() {
		// this.getPre();
	},
	async onLoad() {
		// this.goodsList = this.$Route.query.goodsList;
		// this.from = this.$Route.query.from;
		// this.orderType = this.$Route.query.orderType;
		// this.grouponBuyType = this.$Route.query.grouponBuyType;
		// this.grouponId = this.$Route.query.grouponId;
		await this.getArea();
	},
	methods: {
		changePay(index){
			this.payway=index
			console.log("=====1",index)
		},
		changeInfo(index){
			this.infoData=index
			console.log("=====2",index)
		},
		// 获取省市区
		getArea() {
			this.$http('address.area').then(res => {
				if (res.code === 1) {
					let { provinceData, cityData, areaData } = res.data;
					provinceData.forEach((item, index) => {
						this.addressAreaList.push({ ...item, children: [] });
						this.addressAreaList[index].children.push(...cityData[index]);
						this.addressAreaList[index].children.forEach((item1, index1) => {
							item1['children'] = [];
							item1.children.push(...areaData[index][index1]);
						});
					});
				}
			});
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas,
			});
		},
		// 确认省市区
		regionConfirm(e) {
			this.model.area_text = `${e[0].label}-${e[1].label}-${e[2].label}`;
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
		// 订单信息
		getPre() {
			let that = this;
			that
				.$http("order.pre", {
					goods_list: that.goodsList,
					from: that.from,
					address_id: that.addressId,
					coupons_id: that.couponId,
					order_type: that.orderType,
					buy_type: that.grouponBuyType,
					groupon_id: that.grouponId,
				})
				.then((res) => {
					if (res.data) {
						that.orderPre = res.data;
						that.perGoodsList = res.data.new_goods_list;
						that.totalNum = 0;
						that.perGoodsList.map((item) => {
							item.selType = item.dispatch_type;
							that.totalNum += item.goods_num;
							that.goodsList.forEach((goods) => {
								if (
									item.goods_id == goods.goods_id &&
									item.sku_price_id == goods.sku_price_id
								) {
									goods.dispatch_type = item.dispatch_type;
									
									if (item.store_id) {
										goods.store_id = item.store_id;
									}
								}
							});
						});
					}
				});
		},
		// 提交订单
		subOrder() {
			let that = this;
			that.isDisabled = true;
			that
				.$http(
					"order.createOrder",
					{
						goods_list: that.goodsList,
						from: that.from,
						address_id: that.addressId,
						coupons_id: that.couponId,
						remark: that.remark,
						order_type: that.orderType,
						buy_type: that.grouponBuyType,
						groupon_id: that.grouponId,
						invoice:
							Number(that.orderPre.invoice_amount) &&
							that.selectedInvoice !== "不开具发票"
								? {
									...that.invoiceForm.model,
									amount: that.orderPre.invoice_amount,
								}
								: {},
					},
					"提交中..."
				)
				.then((res) => {
					that.isDisabled = false;
					if (res.code === 1) {
						that.getCartList();
						that.$Router.replace({
							path:
								res.data.status > 0
									? `/pages/order/payment/result`
									: `/pages/order/payment/method`,
							query: {
								orderId: res.data.id,
								payState: res.data.status > 0 ? "success" : "paying",
								orderType: "goods",
							},
						});
					}
				});
		}
	},
};
</script>

<style lang="scss" scoped>

.logistic,
.price-box,
.remark-box,
.score,
.coupon {
	border-top: 1rpx solid rgba(#dfdfdf, 0.5);
}

.border-top {
	border-top: 1rpx solid rgba(#dfdfdf, 0.5);
}

.foot-box-wrap {
	height: calc(100rpx + env(safe-area-inset-bottom) / 4);
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	position: relative;
	width: 100%;
	z-index: 70;
}

.foot-box {
	position: fixed;
	display: flex;
	align-items: center;
	width: 100%;
	height: calc(100rpx + env(safe-area-inset-bottom) / 5);
	border-top: 1rpx solid #eeeeee;
	background-color: #fff;
	z-index: 998;
	bottom: 0;
	//padding-bottom: calc(env(safe-area-inset-bottom) / 5);
	padding: 0 0rpx;
	
	.btn-hover {
		color: #fff;
	}
	
	.num {
		font-size: 26rpx;
		color: #999;
	}
	
	.all-money {
		margin: 0 60rpx 0 20rpx;
		
		.price {
			color: #ff0000;
		}
	}
	
	.sub-btn {
		width: 210rpx;
		height: 100%;
		background: #ED861F;
		border-radius: 0rpx;
		font-size: 28rpx;
		color: #fff;
	}
}
.order-card{
	background: #fff;
	padding: 20rpx 40rpx;
	border-radius: 30rpx;
	margin-bottom: 20rpx;
	.heji{
		color:#666666;
		font-size: 24rpx;
	}
	.money-all{
		color: #EF7700;
	}
	.shop-value{
		color:#666666;
		font-size: 24rpx;
	}
	.shop-name{
		color:#000;
		font-weight: bold;
		font-size: 28rpx;
	}
}
.pay-way{
	background: #fff;
	padding: 20rpx 40rpx;
	border-radius: 30rpx;
	margin-bottom: 20rpx;
	.pay-name{
		color:#000;
		font-weight: bold;
		font-size: 28rpx;
	}
}
.order-content{
	background: #fff;
	padding: 20rpx 40rpx;
	border-radius: 30rpx;
	.pay-name{
		color:#000;
		font-weight: bold;
		font-size: 28rpx;
	}
	.default-box{
		width: 100%;
		.title{
			width: 100%;
			font-size: 28rpx;
			color: #595959;
		}
		.upload{
			width: 100%;
		}
	}
}
.radio-all{
	.radio-group{
		margin-right: 20rpx;
		&:last-child{
			margin-right: 0rpx;
		}
		.radio{
			width: 30rpx;
			height: 30rpx;
		}
		.radio-content{
			.radio-title{
				margin-left: 14rpx;
				font-size: 28rpx;
				color: #595959;
				margin-right: 10rpx;
			}
			.radio-image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
}
</style>
